<template>
  <view>
    <!-- 地图区域 -->
    <view class="page" v-if="orderInfo.type!='万能帮'">
      <unicloud-map ref="map" :debug="false" loadtime="auto" collection="opendb-poi" :where="where" :width="750"
        :height="heightCom" :scale="25" :poi-maximum="100" :default-icon="defaultIcon"
        :customIcons="customIcons" :enable-scroll="true" :enable-zoom="true" :show-compass="true" :show-location="true"
        :latitude="latitude" :longitude="longitude">
      </unicloud-map>
    </view>
    <!-- 订单详情信息列表 -->
    <!-- 1.代取送订单信息 -->
    <view class="order-detail-info" v-if="orderInfo.type==='代取送'">
      <!-- 地址信息区域 -->
      <view class="pick-send-address">
        <view class="address-now">
          <button class="cu-btn cuIcon bg-black">
            <text class="text-white">取</text>
          </button>
          <view class="address-text">
            <text class="text-df text-black text-cut" style="width: 250px;">{{pickAddress.name}}</text>
            <text class="text-sm text-red">{{pickAddress.userName+pickAddress.phone}}</text>
          </view>
        </view>
        <view class="address-new" style=" margin-top: 10px;">
          <button class="cu-btn cuIcon bg-red">
            <text class="text-white">收</text>
          </button>
          <view class="address-text">
            <text class="text-df text-black text-cut" style="width: 250px;">{{deliveryAddress.name}}</text>
            <text class="text-sm text-red">{{deliveryAddress.userName+deliveryAddress.phone}}</text>
          </view>
        </view>
      </view>
      <!-- 时间 -->
      <view class="cu-form-group">
        <view class="title">送达时间</view>
        <view class="">
          {{receiveTime.date+'-'+receiveTime.time}}
        </view>
      </view>
      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>
      <!-- 备注 -->
      <view class="cu-form-group">
        <view class="title">备注</view>
        <view>{{orderInfo.note}}</view>
      </view>
    </view>

    <!-- 2.代够订单信息 -->
    <view class="order-detail-info" v-if="orderInfo.type==='代购'"
      :style="JSON.stringify(shopAddress) === '{}'? 'top:10px;':'top:-100px;'">
      <!-- 收货地址信息信息 -->
      <view class="pick-send-address">
        <view class="address-now" v-if="JSON.stringify(shopAddress) != '{}'">
          <button class="cu-btn cuIcon bg-black">
            <text class="text-white">店</text>
          </button>
          <view class="address-text">
            <text class="text-df text-black text-cut" style="width: 250px;">{{shopAddress.name}}</text>
            <!-- <text class="text-sm text-red">{{shopAddress.userName+shopAddress.phone}}</text> -->
          </view>
        </view>
        <view class="address-new" style=" margin-top: 10px;">
          <button class="cu-btn cuIcon bg-red">
            <text class="text-white">收</text>
          </button>
          <view class="address-text">
            <text class="text-df text-black text-cut" style="width: 250px;">{{deliveryAddress.name}}</text>
            <text class="text-sm text-red">{{deliveryAddress.userName+deliveryAddress.phone}}</text>
          </view>
        </view>
      </view>
      <!-- 代购商品信息 -->
      <view class="cu-form-group">
        <view class="title">商品信息:</view>
      </view>
      <view class="text-content" style="padding:1rpx 30rpx;">{{orderInfo.goodsInfo.goodsDetail}}</view>
      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 3.万能帮投稿信息 -->
    <view class="order-detail-info" v-if="orderInfo.type==='万能帮'" style="top: 10px;">
      <!-- 投稿信息 -->
      <view class="cu-form-group">
        <view class="title">投稿：</view>
        <view>{{orderInfo.helpInfo.content}}</view>
      </view>
      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>
<!--      <comment-section></comment-section> -->
      <!-- 评论区 -->
    </view>

  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  var timer;
  const uniMapCo = uniCloud.importObject('uni-map-co', {
    customUI: true
  });
  const db = uniCloud.database();
  const _ = db.command;
  const category = "dynamics-001";
  export default {
    name: "order-in-progress",
    data() {
      return {
        //订单详情信息
        orderInfo: {},
        latitude: 39.908823,
        longitude: 116.39747,
        //图片信息
        imgList: [],
        where: {
          category: category
        },
        defaultIcon: "/static/logo.png", // 默认图标
        // 自定义图标
        customIcons: [{
            type: "配送员",
            icon: "/static/icon-3service/buy.png"
          },
          {
            type: "目的地",
            icon: "/static/icon-3service/buy.png"
          }
        ],
        isStart: false,
        polyline: [],
        isReady: false,
      };
    },
    props:['order'],
    mounted() {
      this.orderInfo = this.order.orderInfo;
      if (this.orderInfo.type === '万能帮') {
        this.imgList = this.orderInfo.helpInfo.imgList;
      } else if (JSON.stringify(this.orderInfo.shopAddress) === '{}') {
        uniMapCo.initDynamics001({
          pickAddress: ''
        });
        this.latitude = this.orderInfo.deliveryAddress.latitude;
        this.longitude = this.orderInfo.deliveryAddress.longitude;
        console.log(this.latitude, this.longitude);
        this.imgList = this.orderInfo.goodsInfo.imgList;

      } else {
        this.initData();
        this.imgList = this.orderInfo.goodsInfo.imgList;
      }
    },
    onUnload() {
      this.stop();
    },
    methods: {
      async initData() {
        console.log('init');
        let res = await uniMapCo.initDynamics001({
          pickAddress: this.orderInfo.pickAddress || this.orderInfo.shopAddress,
          deliveryAddress: this.orderInfo.deliveryAddress
        });
        await this.refresh();
        this.setPolyline(res.polyline);
      },
      // 虚拟配送测试 
      async virtuallyTest() {
        // 启动监听
        this.start();
        // 先执行一次刷新，获得配送路线
        await this.refresh();
        const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
        let polyline = JSON.parse(JSON.stringify(this.polyline))
        if (polyline && polyline.length > 0) {
          for (let i = 0; i < polyline[0].points.length; i++) {
            if (!this.isStart) {
              break;
            }
            let item = polyline[0].points[i];
            await sleep(1000); // 模拟停顿
            // 模拟上报当前的坐标
            await uniMapCo.updateMyLocation({
              longitude: item.longitude,
              latitude: item.latitude,
            });
          }
        }
      },
      // 刷新地图
      async refresh() {
        await this.$refs.map.refresh({
          needIncludePoints: true
        });
        let res = await uniMapCo.getPolyline();
        //获取两地距离 res.distance
        //this.orderInfo.distance=res.distance+'米';
        if (res.end) {
          await this.$refs.map.refresh({
            needIncludePoints: true
          });
          this.stop();
          this.setPolyline([]);
        } else {
          this.setPolyline(res.polyline);
        }
      },
      // 开启监听
      start() {
        this.isStart = true;
        if (timer) clearInterval(timer);
        timer = setInterval(() => {
          this.refresh();
        }, 1000);
      },
      // 停止监听
      stop() {
        this.isStart = false;
        if (timer) clearInterval(timer);
      },
      // 设置路线
      setPolyline(polyline) {
        this.polyline = polyline;
        this.$refs.map.setPolyline(polyline);
      },
      ViewImage(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url
        });
      },
    },
    computed: {
      //地图高度属性
      heightCom() {
        let systemInfo = uni.getSystemInfoSync();
        return `${systemInfo.windowHeight *(1/2)}px`;
      },
      //订单起始地址信息
      pickAddress() {
        return this.orderInfo.pickAddress
      },
      //订单收货地址信息
      deliveryAddress() {
        return this.orderInfo.deliveryAddress
      },
      //指定店铺地址信息
      shopAddress() {
        return this.orderInfo.shopAddress
      },
      //要求送达时间
      receiveTime() {
        return this.orderInfo.receiveTime
      }
    }
  }
</script>

<style lang="scss">

</style>